<template>
  <div class="text">
    <common-head title="动态" color="#000" bgColor="#fff"></common-head>
    <div class="content">
      <div class="user">
        <div class="left">
          <img :src="datas.userPhoto" alt="">
        </div>
        <div class="right">
          <span>{{datas.userName}}</span><br>
          <span>{{htmlTime}}</span>
        </div>
      </div>
      <p>{{datas.detail}}</p>
      <yd-lightbox class="imgs">
        <yd-lightbox-img :style="{width:width,height:height}" :src="ip+imgs.url" alt="" v-for="(imgs,index) in datas.pictures" :key="index" />
      </yd-lightbox>
    </div>
    <comment :data="datas"></comment>
  </div>
</template>
<script>
  import commonHead from '@/components/commonHead'
  import comment from '@/components/comment'
  import {LightBox, LightBoxImg, LightBoxTxt} from 'vue-ydui/dist/lib.rem/lightbox'
  export default {
    components: {
      commonHead,
      comment
    },
    data() {
      return {
        ip:this.$store.state.ip,
        data: null,
        datas: null,
        htmlTime: null,
        width: null,
        height: null
      }
    },
    methods: {
      time(data) {    //进行时间判断
        let date = null     //字符串时间转时间戳
        date = data.createTime.substring(0, 19);
        date = date.replace(/-/g, '/');
        console.log(date)

        let timeZone = 8*60*60*1000;   //时区转换
        let timestamp = new Date(date).getTime()+timeZone;
        let htmlTime = null;
        let time = new Date().getTime();
        let resourceTime = timestamp;
        console.log(data)
        let n = time - resourceTime;
        let hour = 24 * 60 * 60 * 1000;  //24小时
        let minute = 60 * 60 * 1000;    //60分钟
        let second = 60 * 1000;      //60秒
        if (n > hour) {
          this.htmlTime = Math.round(n / hour) + '天前'
        } else if (n < hour && n > minute) {
          this.htmlTime = Math.round(n / minute) + '小时前'
        } else {
          this.htmlTime = Math.round(n / second) + '分钟前'
        }
      },
    },
    activated() {
      this.data = this.$route.params.data;
//      console.log('1',this.data)
      let data = {
        id: this.data.id,
      };
      this.ylAjax.dynamicsText(data).then(msg => {  //查询单条动态
        this.datas = msg.data;
        this.time(msg.data);
        if (msg.data.pictures.length == 0) {
          this.width = 0
        } else if (msg.data.pictures.length == 1) {
          this.width = '95%';
          this.height = '5rem'
        } else if (msg.data.pictures.length == 2 || msg.data.pictures.length == 4) {
          this.width = '46%';
          this.height = '2.5rem'
        } else {
          this.width = '30%';
          this.height = '1.6rem'
        }
        console.log(msg.data.pictures.length)
      })
    }
  }
</script>
<style lang="less" scoped>
  @import "~less/base";

  .text {
    font-size: 16px;
    position: absolute;
    top: 0;
    margin-top: 1.2rem;
    width: 100%;
    z-index: 40;
    background: @read-bg;
    height: 100%;
    overflow: scroll;
    > .content {
      width: 100%;
      > .user {
        width: 100%;
        height: 1.5rem;
        > div {
          float: left;
        }
        > .left {
          width: 1.5rem;
          height: 1.5rem;
          > img {
            margin-top: 50%;
            margin-left: 0.2rem;
            transform: translateY(-50%);
            width: 1rem;
            height: 1rem;
            border-radius: 50%;
          }
        }
        > .right {
          line-height: 0.6rem;
          > span:nth-child(1) {
          }
          > span:nth-child(3) {
            display: block;
            font-size: 14px;
            color: #a3a3a3;
          }
        }
      }
      > p {
        width: 100%;
        padding: 0 0.2rem;
      }
      > .imgs {
        width: 100%;
        margin-top: 0.3rem;
        > img {
          margin-left: 0.2rem;
        }
      }
    }
  }
</style>
